<template></template>

<script setup>
import { inject, onMounted, ref, onBeforeUnmount } from 'vue';
import { LineLayer, Popup } from '@antv/l7';

import { getWuhanBridge } from '@/api';

const { map, scene } = inject('map');

let selectedBridge = ref('');
let arcLinelayer, popup;

onMounted(async () => {
  map.flyTo({
    center: [114.26459274967397, 30.5002467409972],
    zoom: 13.2,
    pitch: 68,
    bearing: -21,
    speed: 10,
  });

  const bridgeData = (await getWuhanBridge()).data;
  //   console.log(bridgeData);

  arcLinelayer = new LineLayer({
    name: name,
  })
    .source(bridgeData, {
      parser: {
        type: 'geojson',
      },
    })
    .size(10)
    .shape('arc3d')
    .color('name', ['red', 'orange', 'blue', 'purple'])
    .style({
      opacity: 0.8,
      lineTexture: true, // 开启线的贴图功能
      iconStep: 30, // 设置贴图纹理的间距
      textureBlend: 'normal', // 设置纹理混合方式，默认值为 normal，可选值有 normal/replace 两种
      thetaOffset: 1, // 设置弧线偏移角度
    })
    .active(true);

  scene.addLayer(arcLinelayer);

  popup = new Popup();
  scene.addPopup(popup);

  arcLinelayer.on('click', e => {
    // console.log(e);
    selectedBridge.value = '';
    // console.log(e.feature.properties.info);
    // selectedBridge.value = e.feature.properties.info;
    const {
      feature: {
        properties: { name, info },
      },
      lngLat,
    } = e;
    popup.setLngLat(lngLat).setHTML(`<p style='font-size:14px'>${info}</p>`).setTitle(name);
  });
});

onBeforeUnmount(() => {
  if (arcLinelayer) {
    scene.removeLayer(arcLinelayer);
  }
  if (popup) {
    scene.removePopup(popup);
  }
});
</script>

<style lang="scss" scoped>
#info {
  position: absolute;
  top: 20%;
  left: 30%;
  width: 15%;
  height: auto;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 10px;
  background-color: #fff;
}
</style>
